<!--  -->
<template>
  <div class="type-select-user-column">
    <el-popover placement="bottom"
                width="400"
                popper-class="management_text"
                trigger="hover">
      <div>&nbsp;&nbsp;

        {{$t('statement.cuhc')}}<a class="management_link"
           @click="userManagement"> {{$t('statement.um')}}</a>
      </div>
      <div class="toText management_link"
           slot="reference">{{scriptItem.label}}</div>
      <!-- <router-link class="management_link toText" slot="reference" to="">{{scriptItem.label}}</router-link> -->
    </el-popover>
    <el-select v-model="dataForm[scriptItem.text]"
               filterable
               clearable
               :placeholder="scriptItem.hint"
               popper-class="type-select-set-select-tips"
               @change="selectChange"
               default-first-option>
      <template v-if="scriptItem[scriptItem.selectListField].length === 1 && scriptItem[scriptItem.selectListField][0].nodata">
        <el-option value="noDatasetField_defaultSelectNoData">
          <div class="no-dataset-field">{{$t('statement.nds')}}</div>
        </el-option>
      </template>
      <el-option v-else
                 v-for="(its, index) in scriptItem[scriptItem.selectListField]"
                 :key="index"
                 :label="its.label"
                 :value="its.value"></el-option>
    </el-select>
  </div>
</template>

<script>
import mixinTypeViewModule from '@/mixins/script-type-view-module'

export default {
  mixins: [mixinTypeViewModule],
  data () {
    return {
    }
  },
  computed: {
    originDataList () {
      // this.scriptItem.condition
      return []
    },
    datasetFieldList () {
      return this.scriptItem[this.scriptItem.selectListField]
    }
  },
  created () {
    this.getToSelectListFieldList()
  },
  watch: {
    datasetFieldList: {
      handler (val) {
        if (val.length === 0) {
          val.push({
            nodata: true
          })
        } else {
          let index = val.findIndex(e => e.nodata)
          index > -1 && val.length > 1 && val.splice(index, 1)
        }
      },
      deep: true
    }
  },
  methods: {
    userManagement () {
      this.$emit('hiddenSettingModel')
      this.$router.push({
        path: 'UserManagement'
      })
    },
    selectChange (e) {
      if (e === 'noDatasetField_defaultSelectNoData') {
        this.dataForm[this.scriptItem.text] = null
      } else {
        this.dataForm[this.scriptItem.text] = e
      }
      this.$forceUpdate()
    },
    getToSelectListFieldList () {
      let id = this.$store.state.bot.id
      let type = this.$store.state.bot.type
      if (!id) {
        this.scriptItem[this.scriptItem.selectListField] = []
        return
      }
      this.scriptItem[this.scriptItem.selectListField] = []
      const params = {}
      type === 'dataset' && (params['datasetId'] = id)
      type === 'widget' && (params['gadgetId'] = id)
      this.$interface.reports.getFieldsListApi(params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            this.scriptItem[this.scriptItem.selectListField] = []
            return false
          }
          res.data.forEach(item => {
            if (item.type === 'user') {
              this.scriptItem[this.scriptItem.selectListField].push({
                label: item.name,
                value: item.name,
                type: item.type
              })
            }
          })
        }).catch(() => {
          this.scriptItem[this.scriptItem.selectListField] = []
        })
    }
  }
}
</script>

<style lang="scss">
.type-select-user-column {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  // box-shadow: 0px -1px 0px 0px #F0F0F0, 0px 1px 0px 0px #F0F0F0;
  padding: 10px 0;
  .el-select {
    flex: 1;
    input {
      // margin-left: 15px;
    }
  }
  .toText {
    margin-right: 10px;
  }
  .management_link {
    color: #409eff;
    text-decoration: underline;
    cursor: pointer;
  }
}
.management_text {
  background-color: #303133;
  color: #fff;
  .management_link {
    color: #17b3a3;
    text-decoration: underline;
    cursor: pointer;
  }
  .popper__arrow::after {
    border-bottom-color: #303133 !important;
  }
}
.type-select-set-select-tips {
  width: 355px !important;
  min-width: 355px !important;
  .no-dataset-field {
    display: inline-block;
    width: 100%;
    background: #e6f7ff;
    border-radius: 4px;
    font-weight: 400;
    color: #138dc7;
    // line-height: 20px;
    font-size: 14px;
    padding: 0 10px;
    white-space: normal;
    cursor: default;
  }
}
</style>
